<template>
  <!-- ✅ 移动端目录遮罩层 -->
  <div
    v-if="isMobile && showCatalog"
    class="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-end"
    @click.self="showCatalog = false"
  >
    <div class="bg-white dark:bg-gray-800 w-[260px] h-full p-4 shadow-lg overflow-y-auto">
      <MdCatalog :editorId="editorId" :scrollElement="scrollElement" />
    </div>
  </div>

  <!-- ✅ 移动端右下角目录按钮 -->
  <div v-if="isMobile" class="fixed bottom-4 right-16 z-50">
    <button
      class="bg-blue-600 hover:bg-blue-600 text-white px-3 py-1 rounded-full shadow-lg"
      @click="showCatalog = true"
    >
      目录
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { MdCatalog } from 'md-editor-v3'
defineProps<{
  editorId: string
  scrollElement: HTMLElement
}>()

const showCatalog = ref(false)
const isMobile = ref(false)
function updateIsMobile() {
  isMobile.value = window.innerWidth < 1024
}
onMounted(async () => {
  // 在组件加载时立即检查一次屏幕尺寸
  updateIsMobile()
  window.addEventListener('resize', updateIsMobile)
})
onUnmounted(() => {
  window.removeEventListener('resize', updateIsMobile)
})
</script>
